<template>
	<view style="margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;">
		<view v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']" @click="select(item)"
			:key='index'>
			<view style="font-weight: 600;margin-top: 5%;">{{item.week}}</view>
			<view
				style="width:30px;height: 30px;border-radius: 50%;border: none;background-color: #EFEFEF;text-align: center;display: flex;justify-content: center;align-items: center;margin-top: 20%;font-size: 12px;">
				{{item.name}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				week: [],
				same_week: [],
				same_day: '',
			}
		},
		created() {
			// 默认显示当天前一周的数据
			let data = []
			this.start = this.getDay(+7);
			this.end = this.getDay();
			for (let i = 6; i >= 0; i--) {
				data.push(this.getDay(+i))
			}
			var date = data.reverse()
			this.week = date;
			var date = this.week;
			var pkc = [];
			var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			date.forEach((item, index) => { //循坏日期
				var f = new Date(item);
				var week = f.getDay() //计算出星期几
				var str1 = item.split('/');
				var strs = str1[2];

				var weeks = weekday[week]
				var time = Math.round(new Date(item) / 1000)
				var s = {} //用于存储每个日期对象
				s.date = item;
				s.name = strs;
				s.week = weeks;
				s.times = time;
				pkc.push(s)
			})
			this.same_week = pkc;

			this.same_day = pkc[0].date;
		},
		methods: {
			getDay(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds);
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				return tYear + "/" + tMonth + "/" + tDate;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = month;
				}
				return m;

			},
			// 

		},
	}
</script>
<style lang="scss">
	.table_box {
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.timeall {
		position: relative;
		width: 100%;
	}

	.lastbt,
	.nextbt {
		position: absolute;
		top: 18px;
	}

	.lastbt {
		left: -7px;
	}

	.nextbt {
		right: -7px;
	}

	.timeall-all {
		width: 90%;
	}

	.table_header {
		display: flex;
		justify-content: center;
		color: #999999;
	}

	.week_one {
		text-align: center;
		line-height: 50px;
		border-bottom: 1px solid #f5f4f7;
		border-left: 1px solid #f5f4f7;
		background: #F5F5F5;
		width: 200px;
	}

	.weekday {
		flex: 1;
		text-align: center;
		line-height: 25px;
	}

	.finish {
		background: #ffd03d;
		color: #fff !important;
	}
</style>